import React,{Component} from 'react';
import $ from 'jquery';
import { Table,Modal, Button, message } from 'antd';
import CreateUser from './CreateUser';
import history from '../history';
import UpdateForm from './UpdateModel';
import reqwest from 'reqwest';
require ('./User.css');

class User extends Component{
    constructor(props){
        super(props);
        this.state={
            data: [],
            loading: false,
            visible: false,
        }
    };

    componentDidMount() {
        this.fetch();
      }


      //删除的方法
      deleModul=(record,e)=>{
        e.stopPropagation();
        Modal.confirm({
        title:'提示',
        content:`是否删除${record.userName}`,
        cancelText:'取消',
        okText:'确定',
        onOk:()=>{
               $.ajax({
                  url : "http://localhost:8008/user/delete", // 数据发送方式
                  type : "post", // 接受数据格式
                  data:record.id,
                  dataType: "json",
                  contentType:"application/json",
                    success : () => {
                          message.success('删除成功!')
                          this.fetch();
                    }
                });
               }
            });
        }

        //新增的方法
        addModul=()=>{
          this.getFormValue.refs.wrappedComponent.showModal();
        }
        //修改的方法
        updateModul=(record) => {
          this.getValue.refs.wrappedComponent.init(record);
          this.getValue.refs.wrappedComponent.showModal();
        }
    
      //用fetch请求的全部数据
      fetch = () => {
        this.setState({ loading: true });
        reqwest({
          url: 'http://localhost:8008/user/list',
          method: 'get',
          data: {
            
          },
          type: 'json',
        }).then((data) => {
          this.setState({
            loading: false,
            data: data.results,
          });
        });
      }
  


    render(){

      const pagination = {
        pageSize:8
      }

          const columns = [{
            title: '用户名',
            dataIndex: 'userName',
          },
          //  {
          //   title: '密码',
          //   dataIndex: 'passwd',
          // },
          {
            title: 'E-mail',
            dataIndex: 'email',
          },
          {
            title: '手机号',
            dataIndex: 'phonenumber',
          },
          {
            title: '微信号',
            dataIndex: 'wechat',
          },{
            title:'角色',
            dataIndex:'roleid',
          },{
            title:'创建时间 ',
            dataIndex:'createtime',
          },{
            title:'操作',
            key:'action',
            render:(text,record)=>{
                return(
                    <span>
                        < a href="Javascript:;" title='编辑' onClick={this.updateModul.bind(this,record)}>编辑</ a>
                        <span className="ant-divider" />
                        < a href="Javascript:;" title='删除' onClick={this.deleModul.bind(this,record)}>删除</ a>
                    </span>
                );
            }
          }];
                      
        return(
          <div className="ss">
              <Button type="primary" className="buttons" onClick={this.addModul.bind(this)}>
                +
              </Button>
                <Table
                  columns={columns}
                  dataSource={this.state.data}
                  pagination={this.state.pagination}
                  loading={this.state.loading}
                  // onChange={this.handleTableChange}
                  pagination={pagination}
                />
                 <CreateUser ref={ref=>this.getFormValue=ref} fetch={this.fetch}/>
                 <UpdateForm ref={ref=>this.getValue=ref} fetch={this.fetch}/>
          </div>

        )
    }
    
}

export default User;